<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Bootstrap, from Twitter</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }

            @media (max-width: 980px) {
                /* Enable use of floated navbar text */
                .navbar-text.pull-right {
                    float: none;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
        </style>
        <link href="css/bootstrap-responsive.css" rel="stylesheet">

        <link rel="stylesheet" href="css/main.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png">
        <link rel="shortcut icon" href="favicon.png">
    </head>

    <body>

        <div class="navbar navbar-inverse navbar-fixed-top custom-navbar-inverse">
            <div class="navbar-inner custom-navbar-inner">
                <div class="container-fluid">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand custom-brand" href="#">Project Management and Monitoring System</a>
                    <div class="nav-collapse collapse">
                        <p class="navbar-text pull-right">
                            <span class="welcome">Welcome Philip Mark Gutierrez |</span>
                            <a href="#" class="logout">Logout</a>
                        </p>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <div class="hero-unit custom-hero-unit">
                        <div style="width: 100%">
                            <img src="img/me.png"/>
                            <span class="fullname">Philip Mark Gutierrez</span>
                            <!--<div class="custom-vr" style="height: 100%"></div>-->
                            <p></p>
                        </div>
                        <div style="width: 100%;">

                            <div>
                                <img src="icon/home16.png"/>
                                <a class="navigation-label-current" href="#">Home</a>
                            </div>
                            <div>
                                <img src="icon/contact16.png"/>
                                <a class="navigation-label" href="#">My Profile</a>
                            </div>
                            <div>
                                <img src="icon/task16.png"/>
                                <a class="navigation-label" href="#">Tasks</a>
                            </div>
                            <div>
                                <img src="icon/project16.png"/>
                                <a class="navigation-label" href="projects.html">Projects</a>
                            </div>
                            <div>
                                <img src="icon/report16.png"/>
                                <a class="navigation-label" href="#">Reports</a>
                            </div>
                            <div>
                                <img src="icon/structure16.png"/>
                                <a class="navigation-label" href="#">Org. Structure</a>
                            </div>
                            <div>
                                <img src="icon/administrator16.png"/>
                                <a class="navigation-label" href="#">Users</a>
                            </div>
                            <div>
                                <img src="icon/user-group16.png"/>
                                <a class="navigation-label" href="#">Groups</a>
                            </div>
                            <div>
                                <img src="icon/files16.png"/>
                                <a class="navigation-label" href="#">Files</a>
                            </div>
                            <div>
                                <img src="icon/calendar16.png"/>
                                <a class="navigation-label" href="#">Calendar</a>
                            </div>
                            <div>
                                <img src="icon/gear16.png"/>
                                <a class="navigation-label" href="#">Settings</a>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="span9 menu-bar">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="hero-unit custom-menu-unit">
                                
                            </div>
                        </div>
                        
                        <div class="row-fluid">
                            <div class="span10 content-bar">
                                <div class="hero-unit custom-content-unit">

                                </div>
                            </div>

                            <div class="span2 widget-bar">
                                <div class="hero-unit custom-widget-unit">

                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/span-->
            </div><!--/row-->

            <hr class="custom-hr" style="width: 100%;">

            <footer class="custom-footer">
                <p>Developed by Global Strategic Solutions and Services Inc.</p>
            </footer>

        </div><!--/.fluid-container-->

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="js/jquery-1.7.min.js"></script>
        <!--    <script src="js/bootstrap-transition.js"></script>
            <script src="js/bootstrap-alert.js"></script>
            <script src="js/bootstrap-modal.js"></script>
            <script src="js/bootstrap-dropdown.js"></script>
            <script src="js/bootstrap-scrollspy.js"></script>
            <script src="js/bootstrap-tab.js"></script>
            <script src="js/bootstrap-tooltip.js"></script>
            <script src="js/bootstrap-popover.js"></script>
            <script src="js/bootstrap-button.js"></script>
            <script src="js/bootstrap-collapse.js"></script>
            <script src="js/bootstrap-carousel.js"></script>
            <script src="js/bootstrap-typeahead.js"></script>-->

    </body>
</html>
